<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="./lib/bootstrap-3.3.7.css" rel="stylesheet" />
    <script src="./lib/vue-2.4.0.js"></script>
    <script src="./lib/vue-router-3.0.1.js"></script>
    <style>
        html,body,h2{
            font-size: 18px;
            margin: 0;
            padding: 0;
            line-height: 40px;
        }
       .header{
         height: 50px;
         background-color: aqua;
       }
       .body{
         height: 570px;
         background-color: brown;
       }
       .footer{
        height: 50px;
        background-color: chartreuse;
       }
    </style>
</head>
<body>
<div id="app">
     <router-view name="header"></router-view>
     <router-view name="body"></router-view>
     <router-view name="footer"></router-view>
</div>

<template id="header">
    <div class="header">
        <h2>这里是header头部显示内容</h2>
    </div>
</template>

<template id="body">
        <div class="body">
            <h2>这里是body中间显示内容</h2>
        </div>
</template>

<template id="footer">
    <div class="footer">
            <h2>这里是footer底部显示内容</h2>
   </div>
</template>



<script>

var tp01 = {
    template:'#header'
}

var tp02 = {
    template:'#body'
}

var tp03 = {
    template:'#footer'
}


const router = new VueRouter({
     routes: [
         {path:'/',components:{
             'header':tp01,
             'body':tp02,
             'footer':tp03
         }}
        //  {path:'/tp01',component:tp01},
        //  {path:'/tp02',component:tp02},
        //  {path:'/tp03',component:tp03}
     ]
})


 var vm = new Vue({
  el:'#app',
  data:{},
  methods:{},
  router
 }) ;
 </script>
</body>
</html>